/**
 * 产品品类，基础增删改查操作，因为需要给产品列表选择使用，所以不分页
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import Modal from './modal';
import shouldComponentUpdate from '../../components/decorator/shouldComponentUpdate';
import Table from './table';
import Filter from './filter';

const styles = {
	table: {
	}
};

@shouldComponentUpdate
class ProductType extends React.Component {

	onSelect = keys => {
		this.props.dispatch({
			type: 'productType/set',
			payload: {
				selectedRowKeys: keys
			}
		});
	}

	edit = t => {
		if (t && !t.id) return;
		const { dispatch, history } = this.props;
		dispatch({
			type: 'productType/edit',
			payload: t
		});
		if (t) history.push(`/productType/${t.id}`);
	}

	delete = ids => {
		// 删除
		if (!ids || !ids.length) return;
		const { dispatch } = this.props;
		dispatch({
			type: 'productType/multiDelete',
			ids,
			kind: 'productType'
		});
	}

	add = () => {
		// 新增一个角色
		const { dispatch } = this.props;
		dispatch({
			type: 'productType/edit',
			payload: {
				id: null,
				name: ''
			}
		});
	}

	handleOk = t => {
		// 保存更改
		const { dispatch } = this.props;
		const action = {
			type: 'productType/create',
			payload: t
		};
		if (t.id) {
			action.type = 'productType/update';
		}
		dispatch(action);
	}

	query = payload => {
		// 请求数据
		const { dispatch } = this.props;
		dispatch({
			type: 'productType/query',
			payload
		});
	}

	render() {
		const { productType } = this.props;
		const {
			list, currentItem, selectedRowKeys
		} = productType;

		return (
			<div className="content-inner">
				<Filter
					new={this.add}
					delete={this.delete}
					keys={selectedRowKeys}
					query={this.query}
					exportTitle="productCategoryExport"
				/>
				<Table
					list={list}
					selectKeys={selectedRowKeys}
					select={this.onSelect}
					edit={this.edit}
					exportTitle="productCategoryExport"
				/>
				<Modal
					data={currentItem}
					list={list}
					onOk={this.handleOk}
					handleCancel={() => this.edit(null)}
				/>
			</div>
		);
	}
}

export default connect(
	({ productType, loading }) => ({ productType, loading })
)(ProductType);
